import { todolistAction } from '../store/actions/todolist';
import { PureComponent } from 'react';

// 引入 connect 将 ui组件转容器组件
import { connect } from 'react-redux';

//ui 组件 
class Todolist extends PureComponent {
    constructor(){
        super();
        this.state={
            todoText:""
        }
    }
    changeText = (ev) => {
        this.setState({todoText:ev.target.value})
    }
    render() {
        const {todoText} = this.state;
        const { todolistAction,list } = this.props;
        return (
            <div>
                <h3>添加 todolist</h3>
                <input type="text" placeholder="请输入添加列表的内容" data={todoText} onChange={this.changeText}/>
                <button onClick={()=>{todolistAction(todoText)}}>添加</button>
                <hr />
                <ul>
                    {list.map((item, index) => <li key={index}>{item}</li>)}
                </ul>
            </div>
        )
    }
}

export default connect(
    state => {
        console.log(state);
        return { list: state.todolist }
    }, { todolistAction: todolistAction }
)(Todolist);